//提交表单事件
$('#userForm').on('submit',function () {
    //alert(6666)
    var formData = $(this).serialize()   //xxx=xx&xx=xx这样的表单数据
    //console.log( formData )
    //直接向服务器提交数据
    $.ajax({
        type:'post',
        url:'/users',
        data:formData,   //这里无需给一个对象,因为最终会转换为xx=xx的格式
        success:function () {
            //重新加载本页面
            location.reload()
        },
        error:function () {
            alert("添加用户失败")
        }
    })
    //取消默认的提交行为,因为不需要跳转页面
    return false
})


//当头像上传file按钮,选择头像时.
//头像上传,预览
$('#avatar').on('change',function () {
    //选择的所有文件
    //console.log( this.files )
    var fromData = new FormData()    //创建一个空表单
    fromData.append('avatar',this.files[0])  //将头像文件,加入到fromData中

    //发起上传头像的请求
    $.ajax({
        type:'post',
        url:'/upload',
        data:fromData,
        //告诉$.ajax不要解析请求参数
        processData: false,
        //告诉$.ajax不要设置请求参数的类型
        contentType:false,
        success:function (response) {
            //console.log(response)
            //用img标签,做一个预览
            $("#preview").attr('src',response[0].avatar)
            //将头像的路径,设置到value中,等下可以表单的提交
            $('#hiddenAvatar').val(response[0].avatar)
        }
    })
})

//进入页面时,就可以发起获取用户信息的请求了
$.get('/users',function (response) {
    //console.log(response)
    //向模板传递数据
    var html = template('userTpl',{data:response})
    //展示到table中去
    $('#userBox').html(html)
})

//当点击编辑按钮时,通过id值,向服务器发起查询用户的请求,然后就可以获取用户了,然后再修改
//为了让后续新增的元素也有事件,使用事件委托
$('#userBox').on('click','.edit',function () {
    //获取编辑的用户id
    var id = $(this).attr('data-id')
    //alert(id)

    //发起获取用户信息的请求
    $.get('/users/'+id,function (response) {
        //console.log(response)

        //将这个用户信息,刷到修改用户表单里面了
        var html = template('modifyTpl',response)
        //将原本的添加用户表单,替换成修改用户表单
        $("#modifyBox").html(html)
    })
})

// 点击修改按钮,提交修改表单的事件
// 因为这个修改表单,是后面才替换的.所以需要使用事件委托
$('#modifyBox').on('submit','#modifyForm',function () {
    //获取表单所有数据
    var formData = $(this).serialize()   //xx=xx的格式参数
    //console.log(formData)
    //获取修改用户的id
    var id = $(this).attr('data-id')
    //发起修改用户的请求
    $.ajax({
        type:'put',
        url:'/users/'+id,
        data:formData,
        success:function (response) {
            //修改成功,直接刷新页面
            location.reload()
        }
    })
    //取消默认跳转
    return false
})

//使用事件委托,做头像的上传. 因为这个头像上传按钮是后面才有的
$('#modifyBox').on('change','#avatar',function () {
    var fromData = new FormData()
    fromData.append('avatar',this.files[0])
    //发起上传头像的请求
    $.ajax({
        type:'post',
        url:'/upload',
        data:fromData,
        //告诉$.ajax不要解析请求参数
        processData: false,
        //告诉$.ajax不要设置请求参数的类型
        contentType:false,
        success:function (response) {
            //console.log(response)
            //用img标签,做一个预览
            $("#preview").attr('src',response[0].avatar)
            //将头像的路径,设置到value中,等下可以表单的提交
            $('#hiddenAvatar').val(response[0].avatar)
        }
    })
})

//删除操作.  因为这个delete按钮也是通过模板动态创建的,所以需要使用事件委托,否则就无法使用
$('#userBox').on('click','.delete',function () {
    //弹框询问. 选择确定,则返回true
    if ( confirm('你真的要删除这个用户吗?') ) {
        //获取用户的id
        var id = $(this).attr('data-id')
        //发起删除的请求
        $.ajax({
            type:'delete',
            url:'/users/'+id,
            success:function () {
                //删除完成,刷新页面看结果
                location.reload()
            }
        })
    }
})

//勾选全选复选框. 则所有的子复选框选中,批量删除按钮要显示
$('#selectAll').on('change',function () {
    //获取它的状态
    var status = $(this).prop('checked')   //使用prop返回布尔值
    if(status){
        // 如果选中,显示批量删除按钮
        $("#deleteMany").show()
    }else {
        //没选中. 隐藏批量删除按钮
        $("#deleteMany").hide()
    }
    //找到所有的子复选框. 他们的状态和全选复选框保持一致即可
    $('#userBox').find('input').prop( 'checked',status )
})

//勾选了任何一个子复选框,那么批量删除按钮要显示
$("#userBox").on('change','.userStatus',function () {
    //获取所有的子复选框
    var inputs = $("#userBox").find('input')

    //如果选中的子复选框个数,等于所有子复选框个数
    //如果子复选框是全中. 那么全选按钮,也要选中
    if (inputs.length == inputs.filter(':checked').length){
        $('#selectAll').prop('checked',true)
    }else {
        //不是全中,则全选按钮,不选中
        $('#selectAll').prop('checked',false)
    }

    //如果有任何一个子复选框选中,则显示批量删除按钮
    if(inputs.filter(':checked').length>0){
        $("#deleteMany").show()
    }else{
        $("#deleteMany").hide()
    }
})

//点击批量删除按钮,发起批量删除的请求
$("#deleteMany").click(function () {
    var ids = [] //给一个空数组
    //获取选中的子复选框id值,拼接成xx-xx-xx的格式
    //获取所有的选中子复选框
    var checkedUser = $("#userBox").find('input').filter(':checked')
    //循环遍历checkedUser
    checkedUser.each(function (index,element) {
        //console.log( element )   这个elment是原生DOM
        //console.log(  $(element).attr("data-id") )
        //将选中的用户的id,放入数组中
        ids.push( $(element).attr("data-id"))
        //结果:   [第一个id,第二个id,第三个id]
    })

    if ( confirm('你真的要进行批量删除操作吗?') ) {
        $.ajax({
            type:'delete',
            // 拼接id,然后传递到服务器
            url:'/users/'+ids.join('-'),
            success:function () {
                //刷新页面看结果
                location.reload()
            }
        })
    }
})